<template>
	<EmpirePage :title="title">
		<EmpireGrid
			:loading="loading"
			:completed="completed"
			:list="dataGrid.rows"
			@click-load-more="handleLoadMore"
		></EmpireGrid>
	</EmpirePage>
</template>

<script setup>
import EmpirePage from '@/components/empire-page.vue';
import EmpireGrid from '@/components/empire-grid.vue';
import { ref, onMounted, getCurrentInstance, inject, shallowReactive } from 'vue';
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
import { product as api } from '@/api/api.js';
import { pushNavigateTo } from '@/common/utils/navigate.js';

const _ = inject('lodash');
const instance = getCurrentInstance().proxy;
const params = shallowReactive({
	page: 1,
	size: 20
});
const loading = ref(false);
const completed = ref(false);
const title = ref();
const dataGrid = shallowReactive({
	page: 1,
	rows: []
});
onLoad(() => {
	const eventChannel = instance.getOpenerEventChannel();
	eventChannel.on('dataTransProps', (data) => {
		title.value = data.title;
	});
});
onPullDownRefresh(() => {
	params.page = 1;
	getProductLlist();
});
onMounted(() => {
	getProductLlist();
});

function getProductLlist() {
	api
		.getProductList(params)
		.then(({ data: result }) => {
			const { success, data } = result || {};
			if (success) {
				dataGrid.rows = data;
			}
		})
		.catch(() => {
			uni.stopPullDownRefresh();
		});
}

function handleLoadMore() {
	loading.value = true;
	params.page = 2;
	api
		.getProductList(params)
		.then(({ data: result }) => {
			loading.value = false;
			const { success, data } = result || {};
			if (data?.length) {
				dataGrid.rows = dataGrid.rows.concat(data);
			} else {
				completed.value = true;
			}
		})
		.catch(() => {
			loading.value = false;
		});
}
</script>

<style lang="scss" scoped>
.empire-card__body {
}
.empire-card__reload {
}
</style>
